<template>
  <div class="rednest">
    <el-row :gutter="1">
      <el-col :span="18">
        <div class="grid-content bg-purple fist-grid-content">
          <div class="authorInformation">
            <img :src='topicContent.url' height="100px">
            <p>{{topicContent.author}}</p>
          </div>
          <div class="thematicContent">
            <h2>{{topicContent.title}}</h2>
            <p>{{topicContent.content}}</p>
          </div>
          <div style="clear:both;"></div>
        </div>
        <!-- 评论区 -->
        <div class="grid-content bg-purple">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-form-item label="评论区">
                <el-input type="textarea" size="small" autosize :rows="2"
                          placeholder="想说就说，杜绝键盘侠，杜绝喷子，世界和平..."
                          v-model="textarea" style="max-width: 98%">
                </el-input>
                <el-button type="info" size="mini" style="float: right;margin: 1%">提交</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <div>
            <ul class="commentFirstUl">
              <li v-for="(commentItem,index) in commentContent" :key="index">
                <div>
                  <img :src='commentItem.img'>
                  <span>{{commentItem.author}}</span>
                  <span>{{commentItem.comment}}</span>
                  <el-button type="text" @click="open3">回复</el-button>
                </div>
                <ul class="commentLastUl">
                  <li v-for="(cItem,index) in commentItem.commentArray" :key="index">
                    <div>
                      <img :src='cItem.img'>
                      <span>{{cItem.author}}</span>
                      <span>{{cItem.comment}}</span>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>

          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>今日推荐</p>
            <ul class="newsSidebarUl">
              <li v-for="topicItem in topicSecommend" :key="topicItem.url">
                <span>{{topicItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>
    export default {
      name: "topicDetails",
      data() {
        return {
          topicContent: {
              title:'titletitletitletitletitletitletit' +
                'letitletitletitletitletitletitletit' +
                'letitletitletitletitletitletitletit' +
                'letitletitletitletitletitletitle',
              content:'contentcontentcontentcontentc' +
                'ontentcontentcontentcontentcontentc' +
                'ontentcontentcontentcontentcontentco' +
                'ntentcontentcontentcontentcontentcon' +
                'tentcontentcontentcontentcontentconte' +
                'ntcontentcontentcontentcontentconten' +
                'tcontentcontentcontentcontent',
              url: require("../img/lunbo1.jpg"),
              author:'author',
              time:'time',
            },
          topicSecommend:[
            {url:'推荐1'},
            {url:'推荐2'}
          ],
          textarea: '',
          commentContent:[
            {
              comment:'第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复',
              author:'作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者',
              img:'urlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurl',
              commentArray:[
                {
                  comment:'子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复',
                  author:'子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者',
                  img:'子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url',
                }
              ]
            },
            {
              comment:'第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复',
              author:'作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者',
              img:'urlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurl',
              commentArray:[
                {
                  comment:'',
                  author:'',
                  img:'',
                }
              ]
            },
          ]
        }
      }
    }
</script>

<style scoped>
  .fist-grid-content{
    background-color: rgba(255, 192, 203, 0.65);
  }
  .authorInformation{
  display: inline-block;
  float: left;
  margin: 2% 1% 1% 2%;
}
  .thematicContent{
    text-align: left;
    width: 95%;
  }
  .thematicContent h2,p{
    word-wrap:break-word
  }
  .commentFirstUl,.commentLastUl{
    list-style: none;
    text-align: left;
    margin: 1% 0px;
  }
  .commentFirstUl{
    padding: 1em;
  }

</style>
